<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        .login {
            background-color: aqua;
            margin-top: 5%;
            margin-left: 30%;
            width: 300px;
            height: 300px;
        }
        .login #title {
            font-size: 20px;
            font-style: normal;
            padding-top: 10px;
            padding-left: 90px;
            color: chocolate;
        }
        .input-group {
            padding-left: 70px;
            padding-top: 30px;
        }
    </style>
</head>
<body>
<div class="login">
    <span id="title">欢迎用户登陆</span>
    <form id="userlogin" action="/do-login/login" method="post">
        <div class="input-group">
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">用户名</label>
                <div class="username">
                    <input type="text" name="username" id="username" placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码</label>
                <div class="password">
                    <input type="text" name="password" id="password" placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group">
                <div class="checkbox">
                    <span class="checkbox">是否直接登录</span>
                    <!--后台获取的是true这个值，表示可以直接登录-->
                    <input type="checkbox" name="checkbox" id="direct-login" value="true">
                </div>
                <div class="submit">
                    <!-- 进行表单的提交-->
                    <input type="button" value="登录" onclick="submitLoginForm()">
                    <!-- 进行页面的跳转：跳转到注册页面-->
                    <!--绑定事件：进行页面跳转-->
                    <input type="button" value="注册" onclick="forwardRegisterPage()">
                </div>
            </div>
            <!--设置一个隐藏域，该隐藏域记录的是用户的输入次数信息-->
            <div class="hidden">
                <input type="hidden" th:text="${inputCount}" th:name="inputCount">
            </div>
        </div>
    </form>
</div>
</body>
<script>
	/* 跳转到注册页面的脚本 */
    function forwardRegisterPage() {
        window.location.href = "http://localhost:9090/index/reg";
    }

    /* 提交表单的脚本 */
    function submitLoginForm() {
        userlogin.submit();
    }

</script>
</html>